<template>
    <div class="order-conf">

      <group>
        <cell is-link class="an-address">
          <div slot="icon">
            <x-icon type="ios-location-outline" size="30"></x-icon>
          </div>
          <div slot="title" style="padding: 0 10px;">
            <div class="clearfix">
              <span class="an-left">收货人：{{name}}</span>
              <span class="an-right">{{phoneNum}}</span>
            </div>
            <div class="text-info">
              <span>收货地址：{{address}}</span>
            </div>
          </div>
        </cell>
      </group>

      <card :header="{title: shopName }" >
        <div slot="content" class="order-car">
          <img-tex></img-tex>
          <group>
            <cell title="配送方式" value="快递免邮" is-link></cell>
            <x-input title="买家留言" placeholder="选填，填写内容已和卖家确认"></x-input>
          </group>
        </div>
      </card>

      <div class="footer">
        <flexbox :gutter="0" style="background-color: #FFFFFF">
          <flexbox-item :span="8" >
            <div style="text-align: right; padding-right: 10px;">
              <span style="margin-right: 8px; font-size: 14px">共{{shopNum}}件商品</span>
              <span>合计：<span class="color-org">￥<span class="money">{{money}}</span></span></span>
            </div>
          </flexbox-item>
          <flexbox-item :span="4" >
            <x-button class="no-border-radius" :gradients="['#FF9500','#FF5E3A' ]" @click.native="OnOrder">提交订单</x-button>
          </flexbox-item>
        </flexbox>

        <div></div>
      </div>


    </div>
</template>

<script>
  import { Cell, Group,Card,XInput,Flexbox, FlexboxItem,XButton } from 'vux'
  import imgTex from '@/components/imgTex'
    export default {
      name: "order-confirm",
      components: {
        Group,
        Cell,
        Card,
        imgTex,
        XInput,
        Flexbox,
        FlexboxItem,
        XButton,
      },
      data(){
        return{
          name:'张晓美',
          phoneNum:'155648578',
          address:'湖北省武汉市黄鹤楼景区',
          shopName:'太和殿',
          shopNum:1,
          money:899,
        }
      },
      methods:{
        OnOrder(){
          this.$router.push({path:'/myOrder'})
        }
      }
    }
</script>

<style lang="less">
  @import "../../styles/anstyle";
  .order-conf{
    .an-address{
      border-bottom: 8px solid transparent;
      border-image:url(../../assets/img/boder_bg.jpg) 30 30 round;
      .vux-cell-primary{
        .vux-label{
          width: 100%;
          .text-info{
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
    .order-car{
      .weui-cells{
        margin-top: 0;
        &:before{
          border-top: none;
        }
      }
      .imgtex{
        background-color: @color-border4;
      }
    }
    .weui-panel__hd{
      &:after{
        border: none;
      }
    }
    .footer{
      bottom: 0;
      .money{

      }
    }
  }
</style>
